<html>
<head>
    <meta charset="utf-8"/>
    <title>vue 介绍</title>

    <!-- <script src="js/vue.min.js"></script> -->
    <!-- <script src="https://unpkg.com/vue"></script> -->
    <!-- --><script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- 官方文档：https://cn.vuejs.org/v2/guide/ -->


<!-- 绑定 -->
<div id="app">
    <!-- ①声明式渲染 -->
    <p>{{ info }}</p>
    <p v-text="info"></p>
    <p v-html="info"></p>
    <p v-once>{{ info }}</p>

    <p>{{ info.concat("!!!") }}</p>
    <p>{{ info ? "has info" : "no info" }}</p>
    <!--<p>{{ var info2 = "info2" }}</p>
    <p>{{ if (info) {return "info2"} }}</p>-->

    <!-- ②绑定元素特性 -->
    <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>

    <!-- ③条件：控制切换一个元素是否显示 -->
    <p v-if="seen">现在你看到我了</p>

    <!-- ④循环：绑定数组的数据来渲染一个项目列表 -->
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>

    <!-- ⑤处理用户输入 -->
    <button v-on:click="reverseMessage">逆转消息</button>

    </br>
    <!-- ⑥表单输入和应用状态之间的双向绑定 -->
    <input v-model="info">

    <!-- ⑦使用组件 -->
    <ol>
        <todo-item
                v-for="item in groceryList"
                v-bind:todo="item"
                v-bind:key="item.id">
        </todo-item>
    </ol>
<input type="checkbox">
</div>

<!-- 数据 -->
<script type="text/javascript" src="vue.js"></script>

</body>
</html>